<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../src/three.js"></script>
    <script src="../src/OrbitControls.js"></script>
    <style>
        html,body{
            width: 100%;height: 100%;
        }
        #container{
            width: 100%;height: 100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>

        <!-- 
            gl_Position = vec4(position,1.0); 
            modelMatrix         模型矩阵
            viewMatrix          视图矩阵(相机对象的世界矩阵逆矩阵)
            projectionMatrix    投影矩阵(相机对象的投影矩阵)
        -->
<script id="vertexShader" type="x-shader/x-vertex">
    // attribute vec2 uv; // 系统会自动声明顶点纹理坐标变量 uv
    varying vec2 vUv;   // varying 关键字声明一个变量表示顶点纹理坐标插值后的结果
    void main(){
        // 将纹理坐标对象uv进行插值计算
        vUv = uv;
        gl_PointSize = 20.0;
        gl_Position = projectionMatrix*viewMatrix*modelMatrix*vec4(position,1.0);
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    // uniform vec3 color;
    // 声明一个纹理对象变量
    uniform sampler2D texture;
    // 接受插值后的纹理坐标数据
    varying vec2 vUv;
    void main(){
        // 内置函数texture2D通过纹理坐标vUv获得贴图texture的像素值
        vec4 texturecolor = texture2D(texture,vUv);
        // 计算RGB三个分量的光能量之和(体现为亮度)
        // 根据灰度图的公式计算
        float luminance = 0.299*texturecolor.r + 0.587*texturecolor.g + 0.114*texturecolor.b;
        gl_FragColor = vec4(luminance,luminance,luminance,1);
        // gl_FragColor = texture2D(texture,vUv);
        // gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        // gl_FragColor = vec4(color,1.0);
    }
</script>
<script>
    window.onload = function(){
        let container = document.getElementById("container")
        let scene,camera,renderer,controller,mixer
        let plane,material
        init()
        function init(){
            scene = new THREE.Scene()
            camera = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 1000)
            camera.position.set(20,20,20)
            camera.lookAt(scene.position)
            renderer = new THREE.WebGLRenderer({antialias: true})
            // renderer.setClearColor(0xEEEEEE)
            renderer.setSize(container.clientWidth, container.clientHeight)
            controller = new THREE.OrbitControls(camera, renderer.domElement)
            container.appendChild(renderer.domElement)
            var axesHelper = new THREE.AxesHelper( 20 )
            scene.add( axesHelper )

            var geometry = new THREE.SphereBufferGeometry(10,60,60)
            // var geometry = new THREE.PlaneBufferGeometry(100,100)
            // var geometry = new THREE.BoxBufferGeometry(20,20,20)
            console.log(geometry.attributes)
            console.log(geometry.attributes.uv);
            var img = new THREE.TextureLoader().load("./earth_atmos_2048.jpg")
            console.log(img)
            material = new THREE.ShaderMaterial({
                uniforms:{
                    texture:{value:img}
                    // color:{value:new THREE.Color(0xfff000)}
                },
                vertexShader:document.getElementById("vertexShader").textContent,
                fragmentShader:document.getElementById("fragmentShader").textContent
                // side:THREE.DoubleSide,
                
            })
            var sphere = new THREE.Mesh(geometry,material)
            console.log(sphere)
            scene.add(sphere)
            // var point = new THREE.Points(geometry,material)
            // scene.add(point)
            // var line = new THREE.Line(geometry,material)
            // scene.add(line)
            // plane = new THREE.Mesh(planeGeometry,material)
            // plane.rotateY(Math.PI/4)
            // plane.rotation.x = 0.5
            // scene.add(plane)
            
            // console.log(plane.rotation.x)
            animate()
        }
        function animate(){
            // console.log(plane.rotation.x)
            renderer.render(scene,camera)
            controller.update()
            // material.needsUpdate = true
            // plane.rotateY(0.1)
            // plane.rotetion.x =plane.rotetion.x + 0.01
            requestAnimationFrame(animate)
        }
    }
</script>
</html>